<template>
  <div class="block">
    <span class="demonstration">完整功能</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.currentPage"
      :page-sizes="[10, 100, 200, 300, 400]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.zongshu"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      page: {
        currentPage: 4,
        pageSize: 10,
        zongshu: 10000
      },

      list: []
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    handleSizeChange(size) {
      console.log(size);
      this.page.pageSize = size;
      this.getList();
    },
    handleCurrentChange(dddd) {
      console.log(dddd);
      console.log(this.page.currentPage);
      this.page.currentPage = dddd;
      this.getList();
    },
    getList() {
      axios
        .get("", {
          params: {
            currentPage: this.page.currentPage,
            pageSize: this.page.pageSize
          }
        })
        .then(res => {
          this.page.zongshu = res.xxx;
          this.list = res.list;
        });
    }
  }
};
</script>

<style scoped lang="less">
.demo13 {
}
</style>
